import React, { useEffect } from 'react';
import { Spin, Space, DatePicker, Button } from 'antd';
import moment from 'moment';
import _ from 'lodash';

import { TRDefault } from '@/components';
import {
  useTRState,
  TjSelect,
  // TjSegmented,
  TjChart,
  TjTable,
} from '@/pages/ETrade/components';

import { getTransmissionSituation, getImportantChannelNameList } from '../services.js';
import { tableHead, fmtData } from './helper';
import styles from './index.less';
import { useThemeChange } from '@/hooks';

export default () => {
  /** data */
  const initForm = () => ({
    date: moment().add(-1, 'day'),
    channelList: [],
  });
  const [state, setState] = useTRState({
    ...initForm(),
    loading: true,
    cannelOptions: [], // 通道
    // result
    result: [], // 原始数据
    chartOption: null,
    tableData: [],
  });

  const { theme } = useThemeChange();
  /** life */
  useEffect(() => {
    init();
  }, []);

  useEffect(() => {
    setTimeout(() => {
      const { chartOption } = fmtData(state.result);
      setState({ chartOption });
    }, 1);
  }, [theme]);

  const init = async () => {
    // 获取通道数据
    const res = await getImportantChannelNameList();
    const cannelOptions = res?.data?.resultList || [];
    const channelList = cannelOptions.map((x) => x.value);
    state.channelList = channelList;
    setState({
      cannelOptions,
      channelList,
    });
    _onFinish();
  };

  const fetch = async (params) => {
    setState({ loading: true });
    const res = await getTransmissionSituation(params);
    let result = res?.data?.resultList || [];
    if (!result.length) {
      result = null;
    }
    setState({
      result,
      loading: false,
      ...fmtData(result),
    });
  };

  /** method */
  const _onFinish = () => {
    const params = {
      date: state.date.format('YYYY-MM-DD'),
      channelList: state.channelList,
    };
    fetch(params);
  };

  const _onReset = () => {
    setState({
      ...initForm(),
      channelList: state.cannelOptions.map((x) => x.value),
    });
  };

  /** render */
  const _renderMain = () => {
    if (state.loading) return null;
    if (!state.result) return <TRDefault type="emptysm" />;
    return (
      <>
        <div className={styles.chart}>
          <TjChart option={state.chartOption} />
        </div>
        <div className={styles.table}>
          <TjTable primaryKey="id" columns={tableHead} dataSource={state.tableData} />
        </div>
      </>
    );
  };
  return (
    <Spin spinning={state.loading} wrapperClassName={styles.content}>
      <div className={styles.head}>
        <Space size={16} wrap>
          <DatePicker
            value={state.date}
            allowClear={false}
            format={'YYYYMMDD'}
            disabledDate={(v) => v > moment()}
            onChange={(date) => setState({ date })}
          />
          <TjSelect
            value={state.channelList}
            options={state.cannelOptions}
            onChange={(channelList) => setState({ channelList })}
            mode="multiple"
            style={{ width: 200 }}
          />
          <Space size={16}>
            <Button style={{ width: 98, height: 32 }} type="primary" onClick={_onFinish}>
              查询
            </Button>
            <Button style={{ width: 98, height: 32 }} ghost onClick={_onReset}>
              重置
            </Button>
          </Space>
        </Space>
      </div>
      <div className={styles.main}>{_renderMain()}</div>
    </Spin>
  );
};
